import React, { useEffect } from "react";
import { useState } from "react";
import { backgroundObj } from '@/utils/utils';
import { loginData } from '@/utils/utils';
import { fetchListUserInvite } from '@/server/shop'
import { View , Text} from '@tarojs/components'
import './index.scss'
const Invitation = (props) => {
  const { goodsId, active, onShare } = props
  const account = loginData() || {}
  const { username, unionId, openId, organizationId, profile } = account
  const [data, setData] = useState({
    userInviteDataList: [],
    myInviteData: {}
  })
  useEffect(() => {
    if (active === 'yy') {
      fetchData()
    }
  }, [active])
  const fetchData = () => {
    fetchListUserInvite({
      goodsId,
      organizationId
    }).then(e => {
      setData(e)
    })
  }
  const { myInviteData = {}, userInviteDataList } = data
  const {
    ranking,
    inviteAmount
  } = myInviteData
  return <View className="invitation_box">
    <View className="invitation_share_title">
      <View className="invitation_title_left">邀约达人榜</View>
      <View className="invitation_title_right">邀约规则</View>
    </View>
    <View className="invitation_share_my">
      <View className="invitation_share_my1">我</View>
      <View className="invitation_share_my2" style={backgroundObj(profile)}></View>
      <View className="invitation_share_my3">{username}</View>
      <View className="invitation_share_my4">{inviteAmount ? '第' + ranking + '名' : '暂无排名'}</View>
      <View className="invitation_share_my5">邀请<Text>{inviteAmount}</Text>位好友</View>
    </View>
    <View style={{ paddingBottom: 0 }} className="invitation_share_other">
      <View className="invitation_share_other1 invitation_share_otherColor">排名</View>
      <View className="invitation_share_other2"></View>
      <View className="invitation_share_other3 invitation_share_otherColor">昵称</View>
      <View className="invitation_share_other4"></View>
      <View className="invitation_share_other5 invitation_share_otherColor">人数</View>
    </View>
    {userInviteDataList.map((item, index) => {
      if (index < 3) {
        return (<View classname="invitation_share_other" key={index}>
          <View className="invitation_share_other">
            <View className="invitation_share_other1">
              <View className={`invitation_share_otherIcon${index + 1}`}></View>
            </View>
            <View className="invitation_share_other2" style={backgroundObj(item.profile)}></View>
            <View className="invitation_share_other3 ">{item.username}</View>
            <View className="invitation_share_other4">第{index + 1}名</View>
            <View className="invitation_share_other5 ">邀请<Text>{item.inviteAmount}</Text>位好友</View>
          </View>
        </View>)
      }
      else {
        return (<View classname="invitation_share_other" key={index}>
          <View className="invitation_share_other">
            <View className="invitation_share_other1">
              {index + 1}
            </View>
            <View className="invitation_share_other2" style={backgroundObj(item.profile)}></View>
            <View className="invitation_share_other3 ">{item.username}</View>
            <View className="invitation_share_other4">第{index + 1}名</View>
            <View className="invitation_share_other5 ">邀请<Text>{item.inviteAmount}</Text>位好友</View>
          </View>
        </View>)
      }

    })}

    <View className="invitation_bottom_share">
      <View className="invitation_bottom_share_box">
        <View className="invitation_bottom_share_profile" style={backgroundObj(profile)}></View>
        <View className="invitation_bottom_share_content">
          <View className="invitation_bottom_share_username">{username}</View>
          <View className="invitation_bottom_share_desc">邀约好友看直播，争夺上榜机会</View>
        </View>
        <View className="invitation_bottom_share_button" onClick={() => onShare()}>邀请</View>

      </View>
    </View>
  </View>
}
export default Invitation